import { FC, useCallback, useMemo } from 'react'
import { GStyleSheet } from '@/utils/DarkMode';
import { SwipeCell } from '@taroify/core';
import { DeleteOutlined } from '@taroify/icons';
import { ITouchEvent, View } from '@tarojs/components';
import Switch from '@/components/Switch'
import { ISchedule, getRepeatText, getTimeText } from '../utils/tool';
import { getSchedulerFunctionText } from '../utils/scheduleConfig'
import { goToDetialPage } from '../utils/detailModel'

import "./index.css"

interface IProps {
  schedule: ISchedule
  onDelete?: (schedule: ISchedule) => void
  onEdit?: (schedule: ISchedule, enable: boolean) => void // 编辑完
}

const SchduleItem: FC<IProps> = ({ schedule, onEdit, onDelete }) => {
  const styles = dstyles.useDynamicStyle();

  const title = useMemo(() => {
    return getTimeText(schedule.timeObj);
  }, [schedule.timeObj])

  const repeatText = useMemo(() => {
    return getRepeatText({ schedule });
  }, [schedule])

  const toSetSchdule = (e: ITouchEvent) => {
    e.stopPropagation()
    goToDetialPage({ schedule })
  }

  const handleDelete = useCallback(() => {
    onDelete && onDelete(schedule)
  }, [schedule, onDelete])


  const changeEnable = useCallback((value) => {
    console.log(value)
    onEdit && onEdit(schedule, value)
  }, [schedule, onEdit])

  return (
    <SwipeCell catchMove={false}>
      <View style={styles.item} onClick={toSetSchdule}>
        <View style={styles.left}>
          <View style={{ fontSize: 16, fontWeight: 500 }}>{title}</View>
          <View>{repeatText}</View>
          <View>{getSchedulerFunctionText({ schedule })}</View>
        </View>
        <View>
          <Switch
            checked={schedule.enabled}
            onChange={changeEnable}
          />
        </View>
      </View>
      <SwipeCell.Actions side='right' className='centerFlex'>
        <View style={styles.delBtn} onClick={handleDelete}>
          <DeleteOutlined size={16} color='#fff' />
        </View>
      </SwipeCell.Actions>
    </SwipeCell>
  )
}

const dstyles = GStyleSheet.create({
  container: {},
  item: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 10,
    margin: '0 16px 13px',
    padding: '12px 16px',
    color: '#333'
  },
  left: {
    fontSize: 12,
    fontWeight: 400,
    display: 'flex',
    flexDirection: 'column',
    gap: 7
  },
  delBtn: {
    borderRadius: '50%',
    width: 40,
    height: 40,
    backgroundColor: '#EF2F2F',
    marginRight: 16,
    textAlign: 'center',
    lineHeight: '40px'
  }
});

export default SchduleItem
